<template>
    <div>
        <el-select
            v-model="entryCode"
            @change="setInputData"
            @visible-change="handleVisibleChange"
            :placeholder="placeholder"
            :loading="stockReportState"
            filterable
            remote
            :remote-method="getstockCodeList"
            :disabled="disabled"
            size="mini"
            clearable
            name="fundCode"
        >
            <el-option
                v-for="i in stockReport"
                :key="i[itemKey]"
                :label="i[itemKey] + ' ' + i.fundNameSt"
                :value="i[itemKey]"
                :name="'fundCode' + i[itemKey]"
            >
            </el-option>
        </el-select>
    </div>
</template>
<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'RiskEntryInput',
})
export default class RiskEntryInput extends Vue {
    // 针对需求选择可以参考element
    @Prop({ type: String }) type!: string;
    @Prop({ type: String }) placeholder!: string;
    @Prop() disabled!: boolean;
    @Prop() returnDatas!: any;
    @Prop({
        default: () => {
            return 'fundCode';
        },
    })
    itemKey: any;
    @Prop({
        default: () => {
            return '/fundInfo/list/byUser/like?fundCodeOrName=';
        },
    })
    url: string;
    // icon图标
    stockReport: any[] = [];
    entryCode: string = '';
    stockReportState: boolean = false;
    timer = null;

    @Watch('returnDatas', { immediate: true, deep: true })
    watchRetuen() {
        this.entryCode = this.returnDatas;
        // this.setInputData();
        this.getstockCodeList('');
    }

    async getstockCodeList(val: string) {
        this.stockReportState = true;
        await this.$axios
            .get(this.url + encodeURIComponent(val))
            .then((res: any) => {
                this.stockReport = res;
                this.stockReportState = false;
            })
            .catch(() => {
                this.stockReportState = false;
            });
    }

    clearEntryCode() {
        this.entryCode = '';
    }

    handleVisibleChange(state: boolean) {
        if (!state) {
            this.getstockCodeList('');
        }
    }

    setInputData() {
        this.getstockCodeList('');
        // if (this.entryCode == '') {
        //     this.getstockCodeList('');
        // }
        this.$emit('set-entry-data', this.entryCode);
    }
}
</script>
<style lang="scss" scoped>
.icon-but {
    padding: 2px 8px !important;
    margin: 0;
    margin-right: 10px;

    & /deep/ .el-button--mini {
        padding: 2px 8px !important;
    }
}
</style>
